<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    //修饰符 lazy number trim
    const app=Vue.createApp({
      data(){
        return{
          message:'',
          checkBox:[],
          radio:'',
          select:[],
          options:[
            {text:'a',value:'a'},
            {text:'b',value:'b'},
            {text:'c',value:'c'},
          ],
          input:"hello"

        }
      },
      template:`
        <div>
          {{message}}
          {{checkBox}}
          {{radio}}
          {{select}}
          {{input}}
          <br>
          <input v-model.lazy="message"/>
          <input v-model.number="message" type="number"/>
          <input v-model.trim="message"/>
          <textarea v-model="message"/>
          <br>
          jack<input type="checkbox" v-model="checkBox" value="jack"/>
          dell<input type="checkbox" v-model="checkBox" value="dell"/>
          lee<input type="checkbox" v-model="checkBox" value="lee"/>
          <br>
          jack<input type="radio" v-model="radio" value="jack"/>
          dell<input type="radio" v-model="radio" value="dell"/>
          lee<input type="radio" v-model="radio" value="lee"/>
          <br>
          <select v-model="select" multiple>
            <option disabled value="">请选择内容</option>
            <option v-for="item in options" :value="item.value" >
              {{item.text}}
            </option>  
          </select>
          <br>
          <input type="checkbox" v-model="input" true-value="hello" false-value="world"/>

        </div>    
      `
    })
    const vm=app.mount('#root')
  </script>
  
</body>
</html>